<template>
    <div id="mapBoxId"></div>
    <div class="option-btn__list">
        <button class="btn-item" @click="start">坐标拾取</button>
        <button class="btn-item" @click="clear">清除</button>
    </div>
</template>
<script lang="ts" setup>
import { TDMAP_TK } from '@/utils/constant';
import L from 'leaflet';
import markersd from '@/assets/img/markersd.png';
let map: any;
const getLayers = () => {
    if (!map) return;
    L.tileLayer(`https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${TDMAP_TK}`, {
        zIndex: 30,
        minZoom: 9,
        maxZoom: 18
    }).addTo(map);
    L.tileLayer(`https://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${TDMAP_TK}`, {
        zIndex: 31,
        minZoom: 9,
        maxZoom: 18
    }).addTo(map);
};
const initMap = () => {
    // 经纬度[维度,经度]
    map = L.map('mapBoxId').setView([41.33632, 86.25903], 16);
    getLayers();
};
const start = () => {
    const dom = document.getElementById('mapBoxId');
    if (!dom) return;
    dom.style.cursor = 'crosshair';
    map.on('click', (e: any) => {
        console.log(e.latlng);
        const myIcon = L.icon({
            iconUrl: markersd,
        });
        L.marker(e.latlng, {
            title: `经度${e.latlng.lng},维度${e.latlng.lat}`,
            icon:myIcon
        }).addTo(map);
    });
};
const clear = () => {
    
};
onMounted(() => {
    initMap();
});
</script>
<style lang="scss" scoped>
#mapBoxId {
    width: 100vw;
    height: 100vh;
    position: relative;
    z-index: 30;
}
.option-btn__list {
    position: fixed;
    right: 20px;
    top: 20px;
    display: flex;
    z-index: 99;
    gap: 10px;
    .btn-item {
        border: none;
        background-color: #1e71ff;
        border-radius: 20px;
        padding: 0 20px;
        text-align: center;
        color: #fff;
        height: 36px;
        line-height: 36px;
        cursor: pointer;
    }
}
</style>
